<template>
<view class="optimalVue">
	<view class="optimal">
		<!-- 搜索 -->
		<view class="search">
			<input class="uni-input" type="search" placeholder="搜索附近的店">
			<image src="../../static/images/home_ico_serch@2x.png" mode="widthFix"></image>
		</view>
		<view class="swipers">
			<swiper
				:autoplay="true"
				class="swipers2"
				indicator-dots="true"
				indicator-color="#3316843F"
				indicator-active-color="#16843F"
				:current="currentIndex"
			>
				<swiper-item v-for="(item, index) in dataList" :key="index">
					<view :id="'content-wrap' + index">
						<image :src="item.url" class="imgs" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>		
		</view>  
	</view>
	<view>
		<u-sticky>
		    <u-tabs :list="list1" @click="clickList" :current='current'></u-tabs>
		</u-sticky>
		<view class="slfilter">
			<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result"></sl-filter>
		</view>
		
	</view>
	<view class="optimalList">
		<view class="listCont" v-for="(item,index) in optimalData" :key="index" @click="tyg(item.id)">
			<view class="ltImg"><image :src="item.images | fgs" mode="widthFix"></image>
			</view>
			<view class="rtCont">
				<view class="font31">{{ item.name }}</view>
				<view class="filmBom_l">
					<u-rate :value="4" active-color="#FA3534" inactive-color="#b2b2b2" gutter="2" readonly size="12"></u-rate>
					<text>¥{{ item.avgPrice }}/人</text>
				</view>
				<view class="map">
					<view class="map_lt">
						<image src="@/static/images/dianpu_ico_dingwei@2x.png" mode="widthFix"></image>
						<text>{{ item.address }}m</text>
					</view>
					<view class="map_rt">{{ item.sold }}</view>
				</view>
				<view class="mapName"><text>{{ item.area }}</text></view>
				<view class="manMap"><text>近30天{{ item.comments }}人打卡</text></view>
				<view class="tet">
					<view class="tet_l">
						<text>35抵50</text>
						<text> | </text>
						<text>70抵100</text>
					</view>
					<view class="tet_r">
						<text>{{ item.score }}</text>
					</view>
					
				</view>
			</view>
		</view>
	</view>
	
	
</view>
</template>

<script>
	  import slFilter from '@/components/sl-filter/sl-filter.vue';
	export default {
		data() {
			return {
				current:0,
				typeIdNum:1,
				currentIndex:0,
				optimalDataLength:0,
				optimalData:[],
				dataList:[],
				list1: [],
				themeColor: '#000000',
				filterResult: '',
				menuList: [{
						'title': '综合排序',
						'key': 'sort',
						'isSort': true,
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]

					},
					{
						'title': '距离',
						'key': 'salary',
						'isMutiple': true,
						'detailTitle': '请选择月薪范围（可多选）',
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]

					},
					{
						'title': '人气',
						'key': 'single',
						'isMutiple': false,
						'detailTitle': '请选择（单选）',
						'detailList': [{
								'title': '不限',
								'value': ''
							},
							{
								'title': '条件1',
								'value': 'test_1'
							}
						]
					},
					{
						'title': '评分',
						'key': 'sort',
						'isSort': true,
						'detailList': [{
								'title': '默认排序',
								'value': ''
							}
						]
					}
				]
			}
		},
		onLoad() {
			let pages = getCurrentPages();
			let len = pages.length;
			let curParam = pages[len - 1].options;
			this.typeIdNum = curParam.id
			
			if(this.typeIdNum == undefined){
				this.typeIdNum = 1
			}
			console.log(`typeIdNum的值：`,this.typeIdNum)
			this.navList();
			this.loadclickList(this.typeIdNum);
			// 轮播图
			this.userInfo();
			
		},
		filters:{
			fgs(str){
				let imgs = str.split(',');
				return imgs[0]
			}
		},
		methods: {
			tyg(id){
				console.log(id)
				uni.navigateTo({
					url: '/pages/home/ShopDetails/ShopDetails?id='+id
				});
			},
			result(val) {
				console.log('filter_result:' + JSON.stringify(val));
				this.filterResult = JSON.stringify(val, null, 2)
			},
			navList(){
				uni.request({
					url:'/shop-type/list',
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						let data = obj.data.data;
						this.list1 = data
					}
				})
			},
			clickList(item){
				 console.log('item', item);
				 console.log('索引', this.current);
				 
				 let sort = 1;//排序
				 let id = item.id;//id
				 uni.request({
				 	url:'/shop/of/type',
					method:'get',
					data:{
						typeId:id,
						current:sort
					},
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						let data = obj.data.data;
						console.log('shop/of/type',data)
						this.optimalDataLength = data.length;
						if(data.length == 0){
							this.optimalData = []
						}else{
							this.optimalData = data;
						}
						
					}
				 })
			},
			loadclickList(id){
				let sort = 1;//排序
				uni.request({
					url:'/shop/of/type',
					method:'get',
					data:{
						typeId:id,
						current:1
					},
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						let data = obj.data.data;
						console.log('shop/of/type',data)
						this.optimalDataLength = data.length;
						if(data.length == 0){
							this.optimalData = []
						}else{
							this.optimalData = data;
						}
										
					}
				})
			},
			userInfo(){
				uni.request({
					url:'/shop/autoplay',
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						let datas = obj.data.data;
						console.log(`轮播图`,obj.data)
						this.dataList = datas
					}
				})
			}
		},
		components:{
			slFilter
		}
	}
</script>

<style lang="scss" scoped>
	.optimalList{
		padding: 0 30rpx;
		.listCont{
			background: #FFFFFF;
			border-radius: 15rpx;
			margin-bottom: 20rpx;
			padding: 19rpx 28rpx 26rpx 15rpx;
			display: flex;
			.ltImg{
				width: 230rpx;
				border-radius: 15rpx;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.rtCont{
				padding-left: 20rpx;
				width: calc(100% - 230rpx);
				.font31{
					color: #252525;
					font-size: 31rpx;
				}
				.filmBom_l{
					display: flex;
					margin: 8rpx 0 6rpx;
					text{
						color: #222222;
						font-size: 23rpx;
					}
				}
				.map{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.map_lt{
						color: #666666;
						font-size: 19rpx;
						image{
							width: 20rpx;
							margin-right: 6rpx;
						}
					}
					.map_rt{
						color: #666666;
						font-size: 19rpx;
					}
				}
				.mapName{
					margin: 5rpx 0 12rpx;
					text{
						color: #666666;
						font-size: 23rpx;
						margin-right: 20rpx;
					}
				}
				.manMap{
					text{
						color: #E66740;
						font-size: 19rpx;
						background: #FFF0E6;
						border-radius: 8rpx;
						padding: 5rpx 20rpx;
					}
				}
				.tet{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.tet_l{
						display: inline-block;
						border-radius: 8rpx;
						border: 1rpx solid #FF2000;
						margin-top: 15rpx;
						text{
							color: #FF2000;
							font-size: 19rpx;
							padding: 10rpx;
						}
					}
					.tet_r{
						font-size: 46rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #F95620;
						line-height: 54rpx;
						-webkit-background-clip: text;
					}
				}
			}
		}
	}
	
	.optimalVue{
		background-color: #F4F4F4;
		min-height: 100vh;
	}
	.optimal{
		background: linear-gradient(358deg, #F4F4F4 20%, #F6D5BE 38%, #EDA776 100%);
		padding-top: 1px;
		padding: 1px 30rpx;
	}
	.swipers2{
		height: 300rpx;
		border-radius: 15rpx;
		overflow: hidden;
		image{
			// opacity: 0;
			width: 100%;
		}
		.uni-swiper-dot{
			background: red !important;
		}
	}
.search{
	position: relative;
	margin: 15rpx 0 19rpx;
	input{
		height: 65rpx;
		background: #FFFFFF;
		border-radius: 33rpx;
		font-size: 27rpx;
		color: #999999;
		padding: 0 32rpx;
	}
	image{
		position: absolute;
		right: 32rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 38rpx;
	}
}
.select-tab{
	background: none;
}
</style>
